<template>
	<div class="hello-page">
		<div class="top-box">
			<img class="top-log" src="../../assets/wzz_image/wzzlog.png" />
			<div class="top-title">异常统计看板</div>
			<div class="top-time">{{ currentTime }}</div>
		</div>
		<div class="search-content">
			<div class="search-box">
				<div class="search-list">
					<el-select v-model="searchData.unit" placeholder="基地" style="width: 1.2rem;">
						<el-option label="湘潭基地" value="A" />
					</el-select>
				</div>
				<div class="search-list">
					<el-select v-model="searchData.craftId" placeholder="部门" style="width: 1.2rem;">
						<el-option :label="item.name" :value="item.id" v-for="(item, index) in procedureList" :key="index" />
					</el-select>
				</div>
				<div class="search-list">
					<el-select v-model="searchData.craftId" placeholder="班组" style="width: 1.2rem;">
						<el-option :label="item.name" :value="item.id" v-for="(item, index) in procedureList" :key="index" />
					</el-select>
				</div>
				<div class="search-list">
					<el-select v-model="searchData.unit" placeholder="异常项" style="width: 1.2rem;">
						<el-option label="湘潭基地" value="A" />
					</el-select>
				</div>
				<div class="search-list">
					<el-date-picker v-model="searchData.date" type="date" placeholder="日期" :size="size" />
				</div>
				<div class="query-btn" @click="getInitData()">查询</div>
			</div>
		</div>
		<div class="echart-contnt">
			<div class="echart-list">
				<div style="height: 40vh;">
					<div class="statistics-title">
						<div>年统计</div>
						<div>月统计</div>
						<div>日统计</div>
					</div>
					<div class="statistics-box" style="height:15vh">
						<div class="statistics-list">
							<div class="statistics-text">
								<div>呼叫次数</div>
								<div>{{ abnormalInfo.yearTotalTimes }}</div>
							</div>
						</div>
						<div class="statistics-list">
							<div class="statistics-text">
								<div>呼叫次数</div>
								<div>{{ abnormalInfo.monthTotalTimes }}</div>
							</div>
						</div>
						<div class="statistics-list">
							<div class="statistics-text">
								<div>呼叫次数</div>
								<div>{{ abnormalInfo.dateTotalTimes }}</div>
							</div>
						</div>
					</div>

					<div class="statistics-box" style="height:15vh">
						<div class="statistics-list">
							<div class="statistics-text">
								<div>已处理</div>
								<div>{{ abnormalInfo.yearLiftedTimes }}</div>
							</div>
						</div>
						<div class="statistics-list">
							<div class="statistics-text">
								<div>已处理</div>
								<div>{{ abnormalInfo.monthLiftedTimes }}</div>
							</div>
						</div>
						<div class="statistics-list">
							<div class="statistics-text">
								<div>已处理</div>
								<div>{{ abnormalInfo.dateLiftedTimes }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="echart-box" style="height: 40vh;background-color:  rgba(14, 42, 67, 0.6);">
					<echarts-pie :chartData="ProblemCategory"></echarts-pie>
				</div>
			</div>
			<div class="echart-list" style="flex: 1;">
				<div class="table-box" style="height: 40vh;">
					<div class="table-header">
						<div style="flex: 0.3;">序号</div>
						<div>作业单元</div>
						<div>异常项</div>
						<div style="flex: 0.5;">停机</div>
						<div style="flex: 0.5;">进度</div>
						<div style="flex: 0.5;">提报人</div>
						<div>提报时间</div>
						<div style="flex: 0.5;">处理人</div>
						<div>解除时间</div>
						<div>异常描述</div>
					</div>
					<Vue3SeamlessScroll class="scroll" :list="abnormalTable" :hover="true" :step="0.5" :scroll="isScrolling">
						<div class="table-row" v-for="(item, index) in abnormalTable" :key="index">
							<div style="flex: 0.3;">{{ index + 1 }}</div>
							<div>{{ item.workOrgName }}</div>
							<div>{{ item.abnItemName }}</div>
							<div style="flex: 0.5;">{{ item.shutdownTypeText }}</div>
							<div style="flex: 0.5;">{{ item.stateText }}</div>
							<div style="flex: 0.5;">{{ item.subUserName }}</div>
							<div>{{ item.createTime }}</div>
							<div style="flex: 0.5;">{{ item.abnHandlerName }}</div>
							<div>{{ item.liftedTime }}</div>
							<div>{{ item.describe }}</div>
						</div>
					</Vue3SeamlessScroll>
				</div>
				<div class="abnormal-bottom">
					<div class="bottom-list">
						<div class="bottom-title">今日已解决</div>
						<div class="table-box" style="height: 40vh;">
							<div class="table-header">
								<div>作业单元</div>
								<div>异常项</div>
								<div>解除时间</div>
							</div>
							<Vue3SeamlessScroll class="scroll" :list="abnormalTableToday" :hover="true" :step="0.5"
								:scroll="isScrolling">
								<div class="table-row" v-for="(item, index) in abnormalTableToday" :key="index">
									<div>{{ item.workOrgName }}</div>
									<div>{{ item.abnItemName }}</div>
									<div>{{ item.liftedTime }}</div>
								</div>
							</Vue3SeamlessScroll>
						</div>
					</div>
					<div class="bottom-list" style="height: 40vh;background-color:  rgba(14, 42, 67, 0.6);">
						<foldLine :chartData="abnormalChartMonth" :chartTitle="'月度数据'"></foldLine>。
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import foldLine from '../components/foldLine'
import echartsPie from '../components/echartsPie'
import {
	abnormalList,
	abnormalYearMonDD,
	abnormalCategory,
	abnormalTodayResolved,
	abnormalMonthStatistics,
} from "@/api/abnormal.js";
// 机器产能利用率
let isScrolling = ref(true)

const getOptions = () => { }
let searchData = ref({})
const abnormalInfo = ref([])
const abnormalTable = ref([])
const abnormalTableToday = ref([])
const abnormalChartMonth = ref([])
const ProblemCategory = ref({})
const getInitData = () => {
	abnormalYearMonDD().then(res => {
		const { data } = res
		abnormalInfo.value = data
	})
	// 异常记录
	abnormalList().then(res => {
		const { data } = res
		abnormalTable.value = data.data
	})
	// 今日已解决
	abnormalTodayResolved().then(res => {
		const { data } = res
		abnormalTableToday.value = data.data
	})
	// 月度统计
	abnormalMonthStatistics().then(res => {
		const { data } = res;
		abnormalChartMonth.value = {
			xAxisData: data.entries.map(entry => entry.x), // 提取所有 x 值
			seriesData: data.entries.map(entry => entry.y)  // 提取所有 y 值
		};
	})
	abnormalCategory().then(res => {
		const { data } = res;
		ProblemCategory.value.title = '问题类别';
		ProblemCategory.value.data = data.entries.map(entry => ({
			name: entry.abnTypeName,
			value: entry.totalTimes,
		}));
	})
}
const cssLink = ref(false);

onMounted(() => {
	cssLink.value = window.innerWidth < 1300 ? true : false;
	setInterval(() => {
		this.getInitData();
	}, 1000 * 60 * 15);
	getInitData();
	getOptions();
})

</script>
<style scoped lang="scss">
.bottom-title {
	font-size: 15px;
	font-weight: bold;
}

.abnormal-bottom {
	display: flex;
	background-color: rgba(14, 42, 67, 0.6);

	.bottom-list {
		width: 50%;
	}
}

.table-box {
	border: 1px solid #076e83;

	.table-header {
		display: flex;
		align-items: center;
		background-color: rgba(14, 42, 67, .8);

		div {
			border-right: 1px solid #076e83;
			flex: 1;
			text-align: center;
			font-size: 16px;
			height: 55px;
			line-height: 55px;
		}
	}

	.scroll {
		height: calc(40vh - 55px);
		overflow: hidden;
	}

	.table-row {
		display: flex;
		align-items: center;
		border-top: 1px solid #076e83;
		background-color: rgba(14, 42, 67, .8);

		div {
			border-right: 1px solid #076e83;
			flex: 1;
			text-align: center;
			font-size: 14px;
			height: 55px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.statistics-box {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;

	.statistics-list {
		width: 33%;
		margin-right: 10px;
		background-color: rgba(14, 42, 67, 0.6);
		padding: 10px 0;
		height: 15vh;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;

		&:last-child {
			margin-right: 0;
		}

		.statistics-text {
			div {
				text-align: center;
				margin-bottom: 20px;
				font-size: 26px;
				color: rgb(54, 240, 180);

				&:first-child {
					font-size: 16px;
					color: #fff;
				}
			}
		}

	}
}

.statistics-title {
	display: flex;
	align-items: center;
	justify-content: space-between;

	div {
		width: 33%;
		font-size: 26px;
		color: #fff;
		background-color: rgba(14, 42, 67, 0.6);
		margin-right: 10px;
		text-align: center;
		height: 8vh;
		line-height: 8vh;

		&:last-child {
			margin-right: 0;
		}
	}
}

.echart-contnt {
	display: flex;
	justify-content: space-between;
	padding: 0 1%;

	.echart-list {
		width: 30%;
	}
}

.query-btn {
	color: #fff;
	width: 60px;
	text-align: center;
	background-color: #409eff;
	height: 32px;
	line-height: 32px;
	border-radius: 6px;
	margin-bottom: 10px;
	cursor: pointer;
}

.search-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 0 30px;
	background-color: rgba(14, 42, 67, 0.6);
	margin-bottom: 1vh;

	.search-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.search-list {
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}

	.echart-total-box {
		display: flex;

		.echart-total {
			padding-right: 30px;

			.echart-num {
				display: flex;
				align-items: baseline;

				div {
					font-size: 30px;
					color: #db203e;
				}

				text {
					font-size: 14px;
					color: #fff;
				}

			}
		}

	}
}

::v-deep .el-input__wrapper {
	background-color: #0e2a43 !important;
}

.hello-page {
	color: #fff;
	margin: 0;
	padding: 0;
	background: url("../../assets/wzz_image/bg.jpg") no-repeat;
	background-size: cover;
	/* 让背景图片等比例拉伸或缩小以填满容器 */
	box-sizing: border-box;
	width: 100%;
	/* 设置宽度为父容器的100% */
	height: 100%;

	/* 设置高度为父容器的100% */
	.top-box {
		width: 100%;
		height: 10vh;
		background: url("../../assets/wzz_image/head_bg.png") no-repeat;
		background-size: cover;
		/* 让背景图片等比例拉伸或缩小以填满容器 */
		box-sizing: border-box;
		display: flex;
		position: relative;

		.top-log {
			height: 6vh;
		}

		.top-title,
		.top-time {
			position: absolute;
			bottom: 36%;
			/* 64% 的高度中减去64%得到 36%，再向上移动64%的64%，即36% * 0.64 = 3.6% */
		}

		.top-title {
			font-size: 32px;
			color: #399bff;
			font-weight: bold;
			left: 50%;
			/* 根据需要调整位置 */
			transform: translateX(-50%);
		}
	}
}
</style>